import React, { PureComponent } from 'react';

class StatusTimer extends PureComponent {
  state = {
    timerObj: {}
  }

  componentDidMount() {

    if (this.props.goods.activetime) {
      this.timer(this.props.goods.activetime)
    }else{

    }
  }


  componentWillUnmount() {
    clearInterval(this.Timer)
  }

  render() {

    const { timerObj } = this.state
    const { sprice, oprice, stock, salenum} = this.props.goods

    return (
      <>
        <div className="goods-detail-status">
          <div className="container flex-row ">
            <div className="left flex-column">
              <div className="price">
                <span>￥{ sprice }</span>
                <span>￥{ oprice }</span>
              </div>
              <div className="pinghuo-status flex-row">
                {
                  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(val => {
                    return (
                      <div className="yuan" key={val} style={val !== 10 && val !== 9 && val !== 8 ? { backgroundColor: '#FF5A00' } : {}}></div>
                    )
                  })
                }
              </div>
            </div>
            <div className="center">
              <div className="pinghuo-status-text">
              <p>已售{ salenum }</p>
              <p>库存{ stock }</p>
              </div>
            </div>
            <div className="right">
              <div className="timer flex-column">
                <div className="timer-title">
                  距价格到期时间结束
                    </div>
                <div className="timers flex-row">
                  <div className="cube">
                    <span>{timerObj.day}</span>
                  </div>
                      天
                      <div className="cube">
                    <span>{timerObj.hour}</span>
                  </div>
                      时
                      <div className="cube">
                    <span>{timerObj.min}</span>
                  </div>
                      分
                      <div className="cube">
                    <span>{timerObj.sec}</span>
                  </div>
                      秒
                    </div>
              </div>
            </div>
          </div>
        </div>
      </>

    );
  }

  computerStatus = (status, val) => {

    switch (status) {
      case 10:
        return val === 1 ? { backgroundColor: '#FF5A00' } : {}
      case 20:
        return val === 1 || val === 2 ? { backgroundColor: '#FF5A00' } : {}
      case 30:
        return val === 1 || val === 3 ? { backgroundColor: '#FF5A00' } : {}
      case 40:
        return val === 1 || val === 3 || val === 4 ? { backgroundColor: '#FF5A00' } : {}
      case 50:
        return val === 1 || val === 3 || val === 4 || val === 5 ? { backgroundColor: '#FF5A00' } : {}
      case 60:
        return val !== 10 || val !== 9 || val !== 8 || val !== 7 ? { backgroundColor: '#FF5A00' } : {}
      case 70:
        return val !== 10 && val !== 9 && val !== 8 ? { backgroundColor: '#FF5A00' } : {}
      case 80:
        return val !== 10 && val !== 9 ? { backgroundColor: '#FF5A00' } : {}
      case 90:
        return val !== 10 ? { backgroundColor: '#FF5A00' } : {}
      case 100:
        return val !== 0 ? { backgroundColor: '#FF5A00' } : {}
      default:
        return {}
    }
  }

  timer(expiredTime) {
    this.Timer = setInterval(() => {
      let timerObj = {}
      let now = expiredTime - Date.parse(new Date()) / 1000

      timerObj.day = Math.floor(now / 3600 / 24);
      timerObj.hour = Math.floor((now - timerObj.day * 3600 * 24) / 3600);
      timerObj.min = Math.floor((now - timerObj.day * 3600 * 24 - timerObj.hour * 3600) / 60);
      timerObj.sec = now - timerObj.day * 3600 * 24 - timerObj.hour * 3600 - timerObj.min * 60;
      this.setState({
        timerObj
      })
    }, 1000)
  }

}

export default StatusTimer;